/* 获取元素 */
const form = document.getElementById("form");
const input = document.getElementById("input");
const todosUL = document.getElementById("todos");

/* 从localStorage中取数据 */
const todos = JSON.parse(localStorage.getItem("todos"));

if (todos) {
  /* 循环 */
  todos.forEach((todo) => addTodo(todo));
}
/* 表单提交事件 */
form.addEventListener("submit", (e) => {
  /* 阻止默认行为 */
  e.preventDefault();
  /*  */
  addTodo();
});
function addTodo(todo) {
  /* 获取到input的输入 */
  let todoText = input.value;

  if (todo) {
    /*  */
    todoText = todo.text;
  }

  if (todoText) {
    /* 创建li元素 */
    const todoEl = document.createElement("li");
    if (todo && todo.completed) {
      todoEl.classList.add("completed");
    }
    /* 更改todoEl内容 */
    todoEl.innerText = todoText;
    /* todoEl点击事件 */
    todoEl.addEventListener("click", () => {
      /* todoEl元素如果有completed元素就移除没有就添加 */
      todoEl.classList.toggle("completed");
      updateLS();
    });

    todoEl.addEventListener("contextmenu", (e) => {
      /* 阻止默认行为 */
      e.preventDefault();
      /* 移除todoEl元素 */
      todoEl.remove();
      updateLS();
    });

    todosUL.appendChild(todoEl);

    input.value = "";

    updateLS();
  }
}

function updateLS() {
  const todosEl = document.querySelectorAll("li");

  const todos = [];

  todosEl.forEach((todoEl) => {
    todos.push({
      text: todoEl.innerText,
      completed: todoEl.classList.contains("completed"),
    });
  });

  localStorage.setItem("todos", JSON.stringify(todos));
}
